<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="box">

</div>
<script>
    /*
       存取元素属性
    */
    const theDom = document.querySelector('.box')
    theDom.style.backgroundColor = 'lightblue'
    theDom.style.width = '200px'
    theDom.style.height = '200px'
    theDom.style.border = '1px solid black'
    theDom.style.borderRadius = '20px'
    
    /*
        1. style上的属性
            - 一些提到的
            cssText 包含style属性中的css代码
            length
            getPropertyPriority(propertyName): 使用了!important则返回"important"，否则返回空字符串。 
            getPropertyValue(propertyName)，返回属性 propertyName 的字符串值。
            item(index)，返回索引为 index 的 CSS 属性名。等同于 .['xxx']
            removeProperty(propertyName)，从样式中删除 CSS 属性 propertyName。
            setProperty(propertyName, value, priority)，设置 CSS 属性 propertyName 的值为value，priority 是"important"或空字符串。
     */
    theDom.style.cssText = "width:300px; height:280px; background-color:lightblue; border-radius:10px"
    
    /*
        2.计算样式
     */
</script>
</body>
</html>